<template>
  <div class="setting-panel-gui">
    <g-field-collapse
      label="全局样式"
    >
      <g-field
        :level="2"
        label="日期"
      >
        <g-input
          v-model="config.global.date"
        />
      </g-field>
      <g-field
        :level="2"
        tooltip="请选择您系统有的字体，如果您系统无此字体，标题将会显示默认字体"
        label="字体"
      >
        <g-select
          v-model="config.global.fontFamily"
          :data="fontFamilys"
        />
      </g-field>
    </g-field-collapse>
    <g-field-collapse
      label="文本框"
    >
      <g-field
        :level="2"
        label="大小"
        :is-flat="true"
      >
        <g-input-number
          v-model="config.input.size.width"
          :min="40"
          :max="1000"
          :step="5"
          suffix="px"
          inline="inline"
          label="宽度"
        />
        <g-input-number
          v-model="config.input.size.height"
          :min="20"
          :max="100"
          :step="5"
          suffix="px"
          inline="inline"
          label="高度"
        />
      </g-field>
      <g-field
        :level="2"
        label="边框"
        :is-flat="true"
      >
        <g-input-number
          v-model="config.input.border.width"
          :min="1"
          :max="10"
          :step="1"
          suffix="px"
          inline="inline"
          label="宽度"
        />
        <g-color-picker
          v-model="config.input.border.color"
          inline="inline"
          label="颜色"
        />
        <g-input-number
          v-model="config.input.border.radius"
          :min="0"
          :max="100"
          :step="0.5"
          suffix="px"
          inline="inline-single"
          label="圆角"
        />
      </g-field>
      <g-field
        :level="2"
        label="背景颜色"
      >
        <g-color-picker
          v-model="config.input.bgColor"
        />
      </g-field>
      <g-field
        :level="2"
        label="文字字号"
      >
        <g-input-number
          v-model="config.input.fontSize"
          :min="12"
          :max="60"
          :step="1"
          suffix="px"
        />
      </g-field>
      <g-field
        :level="2"
        label="文字颜色"
      >
        <g-color-picker
          v-model="config.input.fontColor"
        />
      </g-field>
      <g-field
        :level="2"
        label="时间分隔符"
      >
        <g-input
          v-model="config.input.separator"
        />
      </g-field>
      <g-field
        :level="2"
        label="文字位置"
      >
        <g-select
          v-model="config.input.pos"
          :data="hAligns"
        />
      </g-field>
    </g-field-collapse>
    <g-field-collapse
      label="日历"
    >
      <g-field
        :level="2"
        label="文字字号"
      >
        <g-input-number
          v-model="config.calendar.fontSize"
          :min="12"
          :max="60"
          :step="1"
          suffix="px"
        />
      </g-field>
      <g-field
        :level="2"
        label="文字颜色"
      >
        <g-color-picker
          v-model="config.calendar.fontColor"
        />
      </g-field>
      <g-field
        :level="2"
        label="日历背景"
      >
        <g-color-picker
          v-model="config.calendar.bgColor"
        />
      </g-field>
      <g-field
        :level="2"
        label="选择器背景"
      >
        <g-color-picker
          v-model="config.calendar.selectBGColor"
        />
      </g-field>
      <g-field
        :level="2"
        label="外边框"
        :is-flat="true"
      >
        <g-input-number
          v-model="config.calendar.border.width"
          :min="0"
          :max="100"
          :step="1"
          suffix="px"
          inline="inline"
          label="宽度"
        />
        <g-color-picker
          v-model="config.calendar.border.color"
          inline="inline"
          label="颜色"
        />
        <g-input-number
          v-model="config.calendar.border.radius"
          :min="0"
          :max="100"
          :step="1"
          suffix="px"
          inline="inline-single"
          label="圆角"
        />
      </g-field>
      <g-field
        :level="2"
        label="内边框"
        :is-flat="true"
      >
        <g-input-number
          v-model="config.calendar.paddingBorder.width"
          :min="0"
          :max="100"
          :step="1"
          suffix="px"
          inline="inline"
          label="宽度"
        />
        <g-color-picker
          v-model="config.calendar.paddingBorder.color"
          inline="inline"
          label="颜色"
        />
        <g-input-number
          v-model="config.calendar.paddingBorder.padding"
          :min="0"
          :max="100"
          :step="0.5"
          suffix="px"
          inline="inline-single"
          label="内边距"
        />
      </g-field>
      <g-field
        :level="2"
        label="选择器内边距"
        :is-flat="true"
      >
        <g-input-number
          v-model="config.calendar.select.time"
          :min="0"
          :max="100"
          :step="0.5"
          suffix="px"
          inline="inline"
          label="时间"
        />
        <g-input-number
          v-model="config.calendar.select.today"
          :min="0"
          :max="100"
          :step="0.5"
          suffix="px"
          inline="inline"
          label="今"
        />
      </g-field>
    </g-field-collapse>
  </div>
</template>

<script lang='ts'>
import { defineComponent, PropType, toRef } from 'vue'
import {
  fontFamilys,
  hAligns,
} from '@/data/select-options'
import { DatePicker } from './date-picker'

export default defineComponent({
  name: 'VDatePickerProp',
  props: {
    com: {
      type: Object as PropType<DatePicker>,
      required: true,
    },
  },
  setup(props) {
    const config = toRef(props.com, 'config')

    return {
      config,

      fontFamilys,
      hAligns,
    }
  },
})
</script>
